<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layout布局</title>

  <!-- 引入js文件，有顺序限制 -->
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
  <!-- 引入css文件，不限顺序 -->
   <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
    
    <!-- 所有的css文件和的有的js文件位置不限 -->
    
</head>
<body>
<!-- 布局 -->
<div id="layoutID" class="easyui-layout"  style="width:600px;height:400px" data-options="fit:true">  
    <!-- 区域面板--北边 --> 
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <!-- 区域面板--南边 -->  
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <!-- 区域面板--东边 -->  
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <!-- 区域面板--西边 -->    
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <!-- 区域面板--中间 -->    
    <div data-options="region:'center',title:'center title',href:'/testeasyui/image/fl.html'"  style="padding:5px;background:#eee;"></div>   
</div>  

<script type="text/javascript">
//浏览器加载jsp页面时触发
    $(function(){
    	//easyui调用方法的语法如下：$('selector').组件名('method',parameter); 
        //将北边折叠
        $("#layoutID").layout('collapse','north');
        //三秒后将南边也折叠
        window.setTimeout(function(){
        	$("#layoutID").layout('collapse','south');
        	 $("#layoutID").layout('expand','north');
        		//三秒后将东边边也折叠
        		window.setTimeout(function(){
        			$("#layoutID").layout('collapse','east');
        			 $("#layoutID").layout('expand','south');
        			//三秒后将西边边也折叠
        			    window.setTimeout(function(){
        			    	$("#layoutID").layout('collapse','west');
        			    	 $("#layoutID").layout('expand','east');
        			    }, 3000)
        		}, 3000);
        },3000);

    });
    
</script>
</body>
</html>